
// .wk_item{
//     text-align: center;
//     line-height: 50px;
//     span{
//         width: 120px;
//         height: 120px;
//         display: inline-block;
//         border-radius:50%;
//         background-color: #eee;
//         padding-top: 24px;
//         .cir_n{
//             border: 1px dashed #ccc;
//             width: 70px;
//             height: 70px;
//             padding-top: 13px;
//             background-color: #fff;
//         }
        
//     }
// }

.box{
	font-family: 'Merriweather Sans', sans-serif;
	overflow: hidden;
	position: relative;
	z-index: 1;
    transition: all .5s;
    &:hover{ 
        box-shadow: 3px 3px 5px #999; 
        img{ 
            transform: scale(1.2); 
        }
        .box-content{ right: 5%; }
        &:before{
            opacity: 1;
            right: -85%;
        }
        &:after{
            opacity: 1;
            top: -42%;
        }
    }
    &:before,&:after{
        content: "";
        background: radial-gradient(circle at 23% 70%,rgba(255,255,255,0.8),#fff 30%);
        width: 151%;
        height: 142%;
        opacity: 0;
        transform: rotate(45deg);
        position: absolute;
        top:-10.5%;
        right:-150%;
        z-index: 1;
        transition: all 0.35s ease;
    }
    &:after{
        background: rgba(255,255,255,0.5);
        width: 65%;
        height: 66%;
        right: auto;
        left: -20%;
        top: -65%;
    }
    img{
        width: 100%;
        height: auto;
        transition: all 0.5s ease;
    }
    .box-content{
        text-align: right;
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        right: -100%;
        z-index: 2;
        transition: all .5s;
    }
    .title{
        color: #1e272e;
        font-size: 23px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 3px 0;
    }
    .post{
        font-size: 16px;
        text-transform: capitalize;
        margin: 0 0 10px;
        display: block;
    }
    .icon{
        padding: 0;
        margin: 0;
        list-style: none;
        li{
            display: inline-block;
            margin: 0 4px;
            a{
                color: #fff;
                background-color: #1e272e;
                font-size: 18px;
                text-align: center;
                line-height: 35px;
                height: 35px;
                width: 35px;
                border-radius: 50%;
                display: block;
                transition: all 0.3s;
                &:hover{
                    color: #1e272e;
                    background-color: #fff;
                    border-radius: 10%;
                    box-shadow: 0 0 5px #1e272e inset;
                }
            }
        }
        
    }
}

// @media only screen and (max-width:990px){
// 	.box { margin: 0 0 30px; }
// }
// @media only screen and (max-width:479px){
// 	.box .title{ font-size: 20px; }
// }